<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <h1 style="color: #ffffff">考试统计</h1>
        </div>
      </el-header>
      <el-main>
        <Card>
          <div slot="title">
            <!--                                <h1 slot="title" class="projectMenuItemTitle">Introduction</h1>-->
            <div style="margin-left: 10px; top: 15px; position: absolute; left: 20px">
              <span
                ><Icon
                  @click.native="Back()"
                  type="ios-arrow-back"
                  size="28"
                  style="cursor: pointer; color: #2d8cf0; vertical-align: sub"
              /></span>
              <strong style="font-size: 1.5rem; margin-left: 10px">问卷管理</strong>
              <Divider type="vertical"></Divider>
            </div>
            <div style="display: flex; align-items: center; justify-content: center">
              <span style="font-size: 1.5rem">{{ StaticData.testInfo.name }}</span>
            </div>
          </div>

          <Row style="margin-top: 30px">
            <Col span="6">
              <div>
                <Card
                  hoverable
                  style="background-color: rgb(var(--blue-1)); height: 250px"
                >
                  <h2>考试信息</h2>
                  <br /><br />
                  <div class="desc">
                    <!-- <Tag style="margin-left: 5px; font-weight: bold">111</Tag> -->
                    <p style="margin-top: 8px">
                      <span style="font-size: 20px"
                        >开始时间：{{ this.StaticData.testInfo.startTime }}</span
                      >
                    </p>
                    <br />
                    <p>
                      <span style="font-size: 20px"
                        >结束时间：{{ this.StaticData.testInfo.endTime }}</span
                      >
                    </p>
                    <br />
                    <!-- <p>
                      <span style="font-size: 20px"
                        >考试时长：{{ this.StaticData.testInfo.duration }}</span
                      >
                    </p> -->
                  </div>
                </Card>
              </div>
            </Col>
            <Col span="6">
              <div>
                <Card style="height: 250px">
                  <Row class="desc">
                    <h2>试卷信息</h2>
                    <br /><br />
                    <Col :span="12">
                      <p style="font-size: 20px">题目数量:{{ quesNumTotal }}</p>
                      <br />
                      <br /><br />
                      <p style="font-size: 20px">
                        试卷总分:{{ StaticData.testInfo.totalScore }}
                      </p>
                    </Col>
                    <Col :span="12">
                      <div style="margin-top:-20px">
                        <p v-for="(item, key) of this.StaticData.testInfo.sectionsList" :key="key">
                          <Tag style="font-size: 20px" color="cyan">{{ item.name }}：{{ item.quesesNum }}道</Tag><br><br>
                        </p>
                      </div>

                    </Col>
                  </Row>
                </Card>
              </div>
            </Col>
            <Col span="6">
              <div>
                <Card style="height: 250px">
                  <Row class="desc">
                    <h2>考试统计</h2>
                    <br /><br />
                    <Col :span="12">
                      <p style="font-size: 20px">
                        交卷人数:{{ StaticData.testItems.length }}
                      </p>
                      <br /><br />
                      <p style="font-size: 20px">平均分：{{ average }}</p>
                    </Col>
                    <Col :span="12">
                      <div>
                        <p style="font-size: 20px">最高分：{{ max }}</p>
                        <br /><br />
                        <p style="font-size: 20px">最低分：{{ min }}</p>
                      </div>
                    </Col>
                  </Row>
                </Card>
              </div>
            </Col>
            <Col span="6">
              <div style="height: 250px">
                <i-circle
                  style="margin-left: 100px"
                  :size="200"
                  :trail-width="4"
                  :stroke-width="5"
                  :percent="percentScore"
                  stroke-linecap="square"
                  stroke-color="#43a3fb"
                >
                  <div class="demo-i-circle-custom">
                    <h1>{{ average }}</h1>
                    <p>平均分</p>
                  </div>
                </i-circle>
              </div>
            </Col>
          </Row>
          <Row>
            <Col>
              <Tabs value="StudentsScore">
                <Tab-pane label="学生成绩" name="StudentsScore">
                  <div
                    :style="{ height: contentHeight - 395 + 'px' }"
                    style="overflow: auto"
                  >
                    <Table
                      border
                      :columns="tableColumns"
                      :data="StudentsScoreStatic"
                    ></Table>
                  </div>
                </Tab-pane>
                <!-- <Tab-pane label="成绩统计" name="ScoreStatic"
                  ><div style="height: 450px">
                    <v-chart class="chart" :option="ScoreStaticOption" autoresize /></div
                ></Tab-pane>
                <Tab-pane label="题目统计" name="QuestionStatic"
                  ><div style="height: 450px">题目统计</div></Tab-pane
                > -->
              </Tabs>
            </Col>
          </Row>
        </Card>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { use } from "echarts/core";
import { BarChart } from "echarts/charts";
import { GridComponent } from "echarts/components";
import { CanvasRenderer } from "echarts/renderers";
import VChart, { THEME_KEY } from "vue-echarts";

use([GridComponent, BarChart, CanvasRenderer]);
export default {
  components: {
    VChart,
  },
  provide: {
    [THEME_KEY]: "light",
  },
  data() {
    return {
      contentHeight: "",
      percentScore: 0,
      StudentsScoreStatic: [],
      tableColumns: [
        {
          width: 60,
          align: "center",
        },
        // {
        //   title: "考试",
        //   key: "name",
        // },
        {
          title: "学号",
          key: "userId",
        },
        {
          title: "交卷时间",
          key: "endTime",
          render: function (h, params) {
            return h(
              "div",
              new Date(this.row.endTime).Format("yyyy-MM-dd HH:mm:ss")
            ); /*这里的this.row能够获取当前行的数据*/
          },
        },
        {
          title: "成绩",
          key: "score",
        },
      ],
      StaticData: [],
      average: 0,
      max: 0,
      min: 0,
      quesNumTotal: 0,
      ScoreStaticOption: {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      },
    };
  },

  computed: {
    ScoreStaticOption: {
      xAxis: {
        type: "category",
        data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    },
  },
  created() {
    this.initSize();
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.initSize);
  },
  mounted() {
    this.viewStatic();
    window.addEventListener("resize", this.initSize);
  },
  methods: {
    Back() {
      this.$router.back(-1);
    },
    initSize() {
      this.contentHeight = window.innerHeight - 140;
    },

    viewStatic() {
      this.StaticData = this.$route.query.value;
      // console.log(this.StaticData);
      this.StaticData.testInfo.startTime = new Date(
        this.StaticData.testInfo.startTime
      ).Format("yyyy-MM-dd HH:mm:ss");
      this.StaticData.testInfo.endTime = new Date(
        this.StaticData.testInfo.endTime
      ).Format("yyyy-MM-dd HH:mm:ss");

      this.StudentsScoreStatic = this.StaticData.testItems;
      console.log(this.StudentsScoreStatic);

      for (let i = 0; i < this.StaticData.testInfo.sectionsList.length; i++) {
        this.quesNumTotal =
          this.quesNumTotal + this.StaticData.testInfo.sectionsList[i].quesIdList.length;
      }
      this.max = this.StaticData.testItems[0].score;
      for (let i = 1; i < this.StaticData.testItems.length; i++) {
        if (this.StaticData.testItems[i].score > this.max) {
          this.max = this.StaticData.testItems[i].score;
        }
      }
      // console.log(this.max);
      this.min = this.StaticData.testItems[0].score;
      for (let i = 1; i < this.StaticData.testItems.length; i++) {
        if (this.StaticData.testItems[i].score < this.min) {
          this.min = this.StaticData.testItems[i].score;
        }
      }
      let sum = 0;
      for (let i = 0; i < this.StaticData.testItems.length; i++) {
        sum += this.StaticData.testItems[i].score;
      }
      this.average = Math.round((sum / this.StaticData.testItems.length) * 10) / 10;
      this.percentScore = (this.average / this.StaticData.testInfo.totalScore) * 100;
    },
  },
};
</script>

<style lang="less" scoped>

.chart {
  height: 400px;
  width: 500px;
}
.demo-i-circle-custom {
  & h1 {
    color: #3f414d;
    font-size: 28px;
    font-weight: normal;
  }
  & p {
    color: #657180;
    font-size: 14px;
    margin: 10px 0 15px;
  }
  & span {
    display: block;
    padding-top: 15px;
    color: #657180;
    font-size: 14px;
    &:before {
      content: "";
      display: block;
      width: 50px;
      height: 1px;
      margin: 0 auto;
      background: #e0e3e6;
      position: relative;
      top: -15px;
    }
  }
  & span i {
    font-style: normal;
    color: #3f414d;
  }
}

.button {
  background-color: #ccc;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.button.active {
  background-color: #f00;
}
.createTaskBtn {
  font-size: 10px;
}
.createTaskBtn:hover {
  color: white;
  background: #276be9;
}
.el-header {
  background-color: #152350c4;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-main {
  background-color: #cbd0da;
  color: #333;

  line-height: 20px;
}
.right-align {
  float: right;
}
</style>
